<template>
  <div class="login-container">
    <!--登录面板内容部分-->
    <div class="login-inner">
      <!--面板头部-->
      <div class="login-header">
        <div class="login-logo">
          <img src="./images/logo-round.png" alt="" width="150">
        </div>
        <!--面板标题-->

      </div>
      <!--面板表单部分-->
      <div class="login-content">
        <form>
          <!--手机验证码登录部分-->
          <div :class="{current: loginMode}">
            <section class="login-message">
              <input type="tel" maxlength="11" placeholder="手机号" v-model="phone_number">

            </section>
            <section class="login-verification">
              <input type="password" maxlength="18" placeholder="密码" v-if="pwdMode" v-model="pwd">
              <input type="text" maxlength="18" placeholder="密码" v-else v-model="pwd">
              <div class="switch-show">
                <img @click.prevent="dealPwdMode(false)" :class="{on: pwdMode}" src="./images/hide_pwd.png" alt=""
                     width="20">
                <img @click.prevent="dealPwdMode(true)" :class="{on: !pwdMode}" src="./images/show_pwd.png" alt=""
                     width="20">
              </div>
            </section>
            <section class="login-hint">
              温馨提示：登录时代表已同意
              <a href="javascript:;">服务协议与隐私政策</a>
            </section>
          </div>
          <!--账号登录部分-->

          <button class="login-submit" @click.prevent="login()">登录</button>
        </form>
        <button class="login-back" @click="$router.push('/findPwd')">找回密码</button>
        <button class="login-back" @click="$router.back()">返回</button>
      </div>
    </div>


  </div>
</template>


<script>
  import { phonePwdLogin} from './../../api/index';
  import { MessageBox } from 'element-ui';
  import {mapActions} from 'vuex';
  import jm from '../../../static/jm'

  export default {
      name: "Login",
      data() {
        return {
          loginMode: true, // 登录方式, true 验证码登录 false 账号登录
          phone_number: '', // 手机号码
          countDown: 0, // 倒计时
          pwdMode: true, // 密码的显示方式 true 密文 false 明文
          pwd: '', // 密码
          userInfo: {}, // 用户的信息
          user_name: '', // 用户名
        }
      },
      computed: {
        // 验证手机号是否合理
        phoneRight() {
          return /^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone_number)
        }
      },
      methods: {
        ...mapActions(['syncUserInfo']),
        // 1. 登录的模式
        dealLoginMode(flag) {
          this.loginMode = flag;
        },

        // 3. 密码的显示方式
        dealPwdMode(flag) {
          this.pwdMode = flag;
        },
        // 5. 登录
        async login() {

          if (!this.phone_number) {
            MessageBox({
              type: 'info',
              message: "请输入手机号码!",
              showClose: true,
            });
            return;
          } else if (!this.phoneRight) {
            MessageBox({
              type: 'info',
              message: "请输入正确手机号码!",
              showClose: true,
            });
            return;
          }
            if (!this.pwd)
            {
              MessageBox({
                type: 'info',
                message: "请输入密码!",
                showClose: true,
              });
              return;
            }
            const result = await phonePwdLogin(this.phone_number, jm(this.pwd));
            if (result.data.状态码 === 200) {
              this.phone_number = ''; // 手机号码
              this.countDown = 0; // 倒计时
              clearInterval(this.intervalId);
              this.pwd = ''; // 密码
              this.phone_number = ''; // 用户名
              this.$router.push("/home");
              console.log(result.data.token);
              window.localStorage.setItem("token", result.data.token);

            } else {
              this.userInfo = {
                message: result.data.备注
              };
            }
          }



      }

  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .login-container
    width 100%
    height 100%
    background #fff
    .login-inner
      padding-top 60px
      width 25%
      margin 0 auto
      .login-header
        .login-logo
          font-size 20px
          font-weight bold
          color mediumpurple
          text-align center
        .login-header-title
          padding-top 40px
          padding-bottom 10px
          text-align center
          > a
            color #333
            font-size 14px
            padding-bottom 4px
            &:first-child
              margin-right 40px
            &.current
              color mediumpurple
              font-weight 700
              border-bottom 2px solid mediumpurple
      .login-content
        > form
          > div
            display none
            &.current
              display block
            input
              width 100%
              height 100%
              padding-left 8px
              box-sizing border-box
              border 1px solid #ddd
              border-radius 4px
              outline 0
              font 400 14px Arial
              &:focus
                border 1px solid mediumpurple
            .login-message
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .get-verification
                position absolute
                top 50%
                right 10px
                transform translateY(-50%)
                border 0
                color #ccc
                font-size 14px
                background transparent
                &.phone_right
                  color purple
            .login-verification
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .switch-show
                position absolute
                right 10px
                top 12px
                img
                  display none
                img.on
                  display block
            .login-hint
              margin-top 12px
              color #999
              font-size 12px
              line-height 20px
              > a
                color mediumpurple
          .login-submit
            display block
            width 100%
            height 42px
            margin-top 30px
            border-radius 4px
            background mediumpurple
            color #fff
            text-align center
            font-size 16px
            line-height 42px
            border 0
        .login-back
          display block
          width 100%
          height 42px
          margin-top 15px
          border-radius 4px
          background transparent
          border: 1px solid mediumpurple
          color mediumpurple
          text-align center
          font-size 16px
          line-height 42px
</style>
